
@Entry
@Component
struct Index {
  // 使用明确的数组类型声明
  @State employees: Array<Employee> = [
    { id: 1, name: '张三', age: 25, department: '技术部', salary: 15000 },
    { id: 2, name: '李四', age: 30, department: '销售部', salary: 12000 },
    { id: 3, name: '王五', age: 28, department: '市场部', salary: 13000 }
  ];

  @State searchText: string = '';
  @State selectedDepartment: string = '全部';
  @State sortBy: string = 'id';

  build() {
    Column({ space: 0 }) {
      // 顶部标题
      Column() {
        Text('员工管理系统')
          .fontSize(24)
          .fontWeight(FontWeight.Bold)
          .fontColor('#333333')

        Row() {
          Text('总人数: ' + this.employees.length)
            .fontSize(14)
            .fontColor('#666666')

          Text('平均薪资: ¥' + this.getAverageSalary())
            .fontSize(14)
            .fontColor('#666666')
            .margin({ left: 15 })
        }
        .margin({ top: 8 })
      }
      .width('100%')
      .padding(20)
      .backgroundColor('#FFFFFF')

      // 搜索区域
      Column({ space: 10 }) {
        TextInput({ placeholder: '搜索员工姓名', text: this.searchText })
          .width('100%')
          .height(40)
          .backgroundColor('#FFFFFF')
          .padding(10)
          .borderRadius(8)
          .onChange((value: string) => {
            this.searchText = value;
          })

        Row({ space: 10 }) {
          Button(this.selectedDepartment)
            .width('30%')
            .height(35)
            .fontSize(12)
            .onClick(() => {
              this.changeDepartment();
            })

          Button(this.getSortButtonText())
            .width('30%')
            .height(35)
            .fontSize(12)
            .onClick(() => {
              this.changeSort();
            })

          Button('重置')
            .width('30%')
            .height(35)
            .fontSize(12)
            .backgroundColor('#FF6B35')
            .fontColor('#FFFFFF')
            .onClick(() => {
              this.resetData();
            })
        }
        .width('100%')
      }
      .width('100%')
      .padding(15)
      .backgroundColor('#FFFFFF')
      .margin({ top: 1 })

      // 员工列表 - 使用最简化的ForEach
      List() {
        // 方法1：直接使用数组
        ForEach(this.employees, (item: Employee) => {
          ListItem() {
            this.BuildEmployeeItem(item)
          }
        }, (item: Employee) => item.id.toString())
      }
      .width('100%')
      .layoutWeight(1)

      // 操作按钮
      Row({ space: 15 }) {
        Button('添加员工')
          .width(120)
          .height(40)
          .backgroundColor('#007AFF')
          .fontColor('#FFFFFF')
          .onClick(() => {
            this.addEmployee();
          })

        Button('批量涨薪')
          .width(120)
          .height(40)
          .backgroundColor('#34C759')
          .fontColor('#FFFFFF')
          .onClick(() => {
            this.giveRaise();
          })
      }
      .width('100%')
      .padding(15)
      .justifyContent(FlexAlign.Center)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F5F5F5')
  }

  // 员工项组件
  @Builder
  BuildEmployeeItem(item: Employee) {
    Row() {
      Column() {
        Text(item.name.substring(0, 1))
          .fontSize(16)
          .fontColor('#FFFFFF')
      }
      .width(40)
      .height(40)
      .backgroundColor(this.getDepartmentColor(item.department))
      .borderRadius(20)
      .justifyContent(FlexAlign.Center)

      Column({ space: 5 }) {
        Text(item.name)
          .fontSize(16)
          .fontColor('#333333')
          .fontWeight(FontWeight.Medium)

        Row() {
          Text(item.department)
            .fontSize(12)
            .fontColor('#666666')

          Text(item.age + '岁')
            .fontSize(12)
            .fontColor('#666666')
            .margin({ left: 10 })

          Text('¥' + item.salary)
            .fontSize(12)
            .fontColor('#FF6B35')
            .fontWeight(FontWeight.Bold)
            .margin({ left: 10 })
        }
      }
      .layoutWeight(1)
      .margin({ left: 12 })
      .alignItems(HorizontalAlign.Start)

      Column({ space: 5 }) {
        Button('详情')
          .width(50)
          .height(25)
          .fontSize(10)
          .backgroundColor('#007AFF')

        Button('删除')
          .width(50)
          .height(25)
          .fontSize(10)
          .backgroundColor('#FF3B30')
      }
    }
    .width('100%')
    .padding(15)
    .backgroundColor('#FFFFFF')
    .margin({ top: 5, bottom: 5, left: 10, right: 10 })
    .borderRadius(8)
  }

  // 业务方法
  getAverageSalary(): number {
    if (this.employees.length === 0) return 0;
    let total = 0;
    for (let i = 0; i < this.employees.length; i++) {
      total += this.employees[i].salary;
    }
    return Math.round(total / this.employees.length);
  }

  getSortButtonText(): string {
    if (this.sortBy === 'id') return 'ID排序';
    if (this.sortBy === 'age') return '年龄排序';
    if (this.sortBy === 'salary') return '薪资排序';
    return '姓名排序';
  }

  getDepartmentColor(department: string): string {
    if (department === '技术部') return '#007AFF';
    if (department === '销售部') return '#34C759';
    if (department === '市场部') return '#FF9500';
    return '#8E8E93';
  }

  changeDepartment(): void {
    const departments = ['全部', '技术部', '销售部', '市场部'];
    let index = departments.indexOf(this.selectedDepartment);
    this.selectedDepartment = departments[(index + 1) % departments.length];
  }

  changeSort(): void {
    const sorts = ['id', 'age', 'salary', 'name'];
    let index = sorts.indexOf(this.sortBy);
    this.sortBy = sorts[(index + 1) % sorts.length];
  }

  addEmployee(): void {
    const names = ['赵六', '钱七'];
    const newEmployee: Employee = {
      id: this.employees.length + 1,
      name: names[Math.floor(Math.random() * names.length)],
      age: 25,
      department: '技术部',
      salary: 10000
    };
    this.employees = [...this.employees, newEmployee];
  }

  giveRaise(): void {
    // 简化实现
    console.log('涨薪功能');
  }

  resetData(): void {
    this.employees = [
      { id: 1, name: '张三', age: 25, department: '技术部', salary: 15000 },
      { id: 2, name: '李四', age: 30, department: '销售部', salary: 12000 }
    ];
    this.searchText = '';
    this.selectedDepartment = '全部';
    this.sortBy = 'id';
  }
}

// 员工接口定义
interface Employee {
  id: number;
  name: string;
  age: number;
  department: string;
  salary: number;
}